<html>
<head>
    <title>用户模块</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../../../res/layui/css/layui.css" media="all"/>
    <script type="text/javascript" src="../../../res/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="/ok-admin/js/permissionSetting.js"></script>
    <link rel="stylesheet" href="../../css/oksub.css">
    <style type="text/css">
        .demoTable{
            position:absolute;
            left:470px;
        }
        /*复选框居中*/
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
            top: 50%;
            transform: translateY(-50%);
        }
        .layui-form-select .layui-edge{
            margin-top: 13px;
        }
    </style>
</head>
<body>

<div>
    <div class="ok-body">
        <!--模糊搜索区域-->
        <div class="layui-row">
            <form class="layui-form layui-col-md12 ok-search">
                <div class="layui-inline" style="margin-left: 10px">
                    <div class="layui-input-inline">
                        <select name="companyId" id="companyId"  lay-search=""  lay-filter="aihao">
                            <option value="">选择公司</option>
                            <option value="0">总公司</option>
                        </select>
                    </div>
                </div>
                <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">
                <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
                <input class="layui-input" placeholder="请输入用户名" autocomplete="off" name="userName">
                <button class="layui-btn" lay-submit="" lay-filter="search">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </form>
        </div>
        <!--数据表格-->
        <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
    </div>
    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            {{# if(authorization("user:add")){ }}
            <div class="layui-inline" lay-event="Increasedata"><i class="layui-icon layui-icon-add-1"></i></div>
            {{# } }}
            {{# if(authorization("user:batchDelete")){ }}
            <div class="layui-inline" lay-event="BatchRemove"><i class="layui-icon layui-icon-delete"></i></div>
            {{# } }}
        </div>
    </script>

    <script type="text/html" id="barDemo">
<!--        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
<!--        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
        {{# if(authorization("user:edit")){ }}
        <a lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
        {{# } }}
        {{# if(authorization("user:delete")){ }}
        <a lay-event="del"><i class="layui-icon">&#xe640;</i></a>
        {{# } }}
    </script>
    <script type="text/html" id="audit">
        {{# if(authorization("user:audit")){ }}
            {{# if(d.whetherValid=='2'){ }}
            <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="vet">审核</a>
            {{# } else if(d.whetherValid=='1'){ }}
            <a class="layui-btn layui-btn-sm layui-btn-disabled">已审核</a>
            {{# } }}
        {{# } }}
    </script>
    <script type="text/html" id="img">
        <img src="{{d.userImg}}" alt="图片" id="dd" width="50" height="50" onclick="previewImg(this)"/>
    </script>


    <script src="../../../res/layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

    <script>
        var openindex = null;
        var table = null;

        layui.use(['table','laydate'] , function(){
            table = layui.table ,
                laydate = layui.laydate;
            let form = layui.form;

            /**
             * 查询所有分公司
             */
            $.ajax({
                url:"/hqImm/queryAll",
                dataType:"json",
                data:'',
                type:"post",
                success:function (res) {
                    console.info(res)
                    $.each(res,function (index,item) {
                        $("#companyId").append(`<option value="${item.immId}">${item.immName}</option>`);
                    })
                    form.render("select");
                },
                error:function () {

                }
            })

            let roleTable = table.render({
                method:"POST",
                elem: '#test'
                ,url:'/perUsers/showListUser'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '用户数据表'
                ,height: 'full-200', cellMinWidth: 80 //最大化适应
                ,height:600
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'userId', title:'序号', width:60, type:'numbers',unresize: true, sort: 'true'}
                    ,{field:'companyName', title:'公司名称', width:150,align:'center',templet:function (d) {
                                if(d.companyId==0){
                                    return "总公司"
                                }else{
                                    return d.companyName;
                                }
                        }}
                    ,{field:'userName', title:'用户名称', width:150,align:'center'}
                    ,{field:'userImg', title:'用户头像',align:'center',templet:'#img'}
                    ,{field:'userPhone', title:'手机号',align:'center'}
                    ,{field:'userMail', title:'用户邮箱',align:'center'}
                    ,{field:'whetherValid', title:'审核状态', width:150,align:'center',templet:function (d) {
                            if (d.whetherValid=="1"){
                                return  `<a class="layui-btn layui-btn-xs layui-btn-normal">已审核</a>`;
                            }else {
                                return  '<a class="layui-btn layui-btn-xs layui-btn-danger">未审核</a>';;
                            }
                        }}
                    ,{field:'createTime', title:'操作时间', width:180,align:'center', sort: 'true'}
                    ,{field:'createPerson', title:'操作人',align:'center',width:90}
                    ,{fixed: 'right', title:'审核',align:'center',width:120,templet:'#audit'}
                    ,{fixed: 'right', title:'操作',width:100, toolbar: '#barDemo',align:'center'}
                ]]
                ,page: true
                ,done: function (res, curr, count) {  //无数据返回上一页
                    if (curr > 1 && res.data.length === 0) {
                        curr = curr - 1;
                        table.reload('test', {
                            page: {
                                curr: curr
                            },
                            where: {
                            },
                        });
                    }
                }
            });

            //日期时间选择器
            laydate.render({
                elem: "#startTime",
                theme: 'molv',
                type: "datetime"});
            laydate.render({
                elem: "#endTime", type: "datetime",
                theme: 'molv'
            });

            //监听行单击事件（双击事件为：rowDouble）
            $(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
                var index = $(this).attr('data-index');
                var tableBox = $(this).parents('.layui-table-box');
                //存在固定列
                if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
                    tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
                } else {
                    tableDiv = tableBox.find(".layui-table-body.layui-table-main");
                }
                var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
                if (checkCell.length>0) {
                    checkCell.click();
                }
                //选中背景色
                $(this).siblings().css("background-color", "#FFFFFF");
                $(this).css("background-color", "#F2F2F2");
            });

            $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
                e.stopPropagation();
            })

                //查询条件
            form.on("submit(search)", function (data) {
                console.info(data);
                roleTable.reload({
                    where: data.field,
                    page: {curr: 1}
                });
                return false;
            });

            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        alert(data);
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;
                    case 'BatchRemove':
                        layer.confirm('真的删除行么', function(index){
                            var data = checkStatus.data;
                            console.info(data);
                            if(data==null || data==""){
                                layer.msg('未选择数据');
                                return;
                            }
                            var userIdAll = [];
                            $.each(data,function(index,item){
                                userIdAll.push(item.userId);
                            });
                            var formData = new FormData();
                            formData.append("userIdAll", userIdAll);
                            $.ajax({
                                url:"/perUsers/deleteUserIdAll",
                                data:formData,
                                type:"post",
                                dataType:'json',
                                processData: false,
                                contentType: false,
                                success:function (ojj) {
                                    if(ojj.status=20){
                                        tishi(ojj.message);
                                    }else{
                                        tishi(ojj.message);
                                    }
                                },
                                error:function () {

                                }
                            })

                            layer.close(index);
                        });
                        break;
                    case 'Increasedata':
                        openindex = layui.layer.open({
                            type: 2,
                            // skin: 'layui-layer-rim', //加上边框
                            area: ['55%', '65%'], //宽高
                            title:'用户维护',
                            anim:1,
                            skin: 'layui-layer-molv',//样式
                            shade: [0.8, '#393D49'] ,//显示遮罩
                            // shift: 1, //0-6的动画形式，-1不开启
                            shadeClose:true,//点击也能遮罩层关闭
                            //maxmin: true, //开启最大化最小化按钮
                            content: 'from.html',
                        });
                        break;

                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                console.log(obj);
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        console.info(data);
                        $.post("/perUsers/deleteUser",{userId : data.userId},function(objs){
                            if(objs.status==20){
                                tishi(objs.message);
                            }else{
                                tishi(objs.message);
                            }
                        },"json");
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    console.info(data);
                    var id =  data.userId;
                    openindex = layer.open({
                        type: 2,
                        // skin: 'layui-layer-rim', //加上边框
                        area: ['55%', '65%'], //宽高
                        title:'用户维护',
                        anim:1,
                        skin: 'layui-layer-molv',//样式
                        shade: [0.8, '#393D49'] ,//显示遮罩
                        // shift: 1, //0-6的动画形式，-1不开启
                        shadeClose:true,//点击也能遮罩层关闭
                        //maxmin: true, //开启最大化最小化按钮
                        content: 'from.html?id='+id,
                    });
                }else if (obj.event === 'vet') {
                    console.info(data.userId);
                    layer.confirm('确定审核该用户吗？', function(index) {
                        layer.close(index);
                        $.ajax({
                            async : true,
                            type : "POST",
                            url : "/perUsers/auditUser",
                            data:{"userId":data.userId},
                            dataType: "json",
                            success : function(obj1) {
                                if(obj1.status==20){
                                    tishi(obj1.message);
                                }else{
                                    tishi(obj1.message);
                                }
                            },
                            error : function(fh) {

                            }
                        });
                    });
                }
            });
        });
        function tishi(msg) {
            layer.msg(msg,{time:1000,icon:1},function(){
                table.reload("test");
                //window.location.reload(true);
            });
        }


        /**
         * 关闭取消
         */
        function closeCancel(msg){
            layer.close(openindex);
        }


        /**
         * 关闭弹出层
         */
        function closeOpen(msg){
            layer.close(openindex);
            layer.msg(msg,{time:1000,icon:1},function(){
                table.reload("test");
                //window.location.reload(true);
            });
        }

        /**
         * 图片预览
         */
        function previewImg(obj) {
            var img = new Image();
            img.src = obj.src;
            var height = img.height + 50; //获取图片高度
            var width = img.width; //获取图片宽度
            var imgHtml = "<img src='" + obj.src + "' />";
            //弹出层
            layer.open({
                type : 1,
                shade : 0.8,
                offset : 'auto',
                area : [ width + 'px', height + 'px' ],
                shadeClose : true,//点击外围关闭弹窗
                scrollbar : false,//不现实滚动条
                title : "图片预览", //不显示标题
                content : imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel : function() {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                },
                time : 2000
                //2s后自动关闭
            });
        }

    </script>


</div>
</body>
</html>
